<template>
    <div class="userindex-box">
        <div class="tltle">账户安全</div>
        <div class="userindex-box-module-content">
            <div class="custom-from-box">
              <div class="custom-inoput-box">
                <span>手机绑定：</span>
                <input type="number" disabled name="" id="phone" :value="this.$store.state.user.mobile" />
              </div>
              <div class="custom-btn-box active" >已绑定</div>
            </div>
            <div class="custom-from-box">
              <div class="custom-inoput-box">
                <span>登陆密码：</span>
                <input type="password" disabled name="" id="password" value="132456789" />
              </div>
              <div class="custom-btn-box" @click="Change_password()">修改密码</div>
            </div>
            <div class="custom-from-box">
              <div class="custom-inoput-box">
                <span>生日认证：</span>
                <input type="" disabled name="" id="birthday" :value="this.$store.state.user.lastLoginTime" />
              </div>
              <div class="custom-btn-box" @click="Change_birthday()">修改</div>
            </div>
            <p class="address">上次登录地址：未知</p>
        </div>
         <div class="tltle">账户设置</div>
         <div class="userindex-box-module-content">
            <div class="user-info-row">
                <div class="animate__box">
                  <span>动画</span>
                  <p :class="{'active':this.$store.state.user.animation==0}" @click="animate__box" >
                    <span v-if="this.$store.state.user.animation==0">已开启</span>
                    <span v-else>已关闭</span>
                  </p>
                </div>
                <div class="music__box">
                  <span>音效</span>
                 <p :class="{'active':this.$store.state.user.soundEffects==0}" @click="music__box">
                   <span v-if="this.$store.state.user.soundEffects==0">已开启</span>
                   <span v-else>已关闭</span>
                 </p>
                </div>
            </div>
         </div>
         <div class="tltle">活动邀请码</div>
         <div class="userindex-box-module-content">
          <div class="custom-from-box">
            <div class="custom-inoput-box">
              <input type="text" class="steam_input" :disabled="allowSetInviteCode" id="yqm" placeholder="请输入您的邀请码" v-model="$store.state.user.invitationCode" />
            </div>
            <div :class="['custom-btn-box', {active: allowSetInviteCode}]" @click="saveInviteCode" >保存</div>
          </div>
           <p class="address">{{allowSetInviteCode ? '注意：输入框已关闭' : '注意：请填写活动邀请码'}}</p>
         </div>
         <div class="tltle">steam交易设置</div>
         <div class="userindex-box-module-content">
          <div class="custom-from-box">
            <div class="custom-inoput-box">
              <input type="text" class="steam_input" name="" v-model="steams" id="steam" placeholder="请输入您的steam交易链接"  />
            </div>
            <div class="custom-btn-box " @click="Change_steam()">保存</div>
          </div>
          <ul class="userindex-box-tips-box">
            <li><p>小提示：</p></li>
            <li><p>打不开 Steam 怎么办?</p><a @click="linkDownload('https://www.bilibili.com/video/BV15D4y1X79w/')">点击查看教程</a></li>
            <li><p>获取你的Steam交易链接</p><a @click="linkDownload('https://steamcommunity.com/login/home')">点击这里获取</a></li>
            <li><p>取回前请将您的库存设置为 <span>“公开”</span></p><a @click="linkDownload('https://steamcommunity.com/login/home')">点击库存隐私</a></li>
          </ul>
         </div>
         <div class="pop" v-if="pop">
            <div class="register-box" v-if="C_password">
              <div class="title">修改密码</div>
              <p class="p">{{this.$store.state.user.mobile}}</p>
              <div  v-if="code">
                <ul class="centen">
                  <li><div class="input-box" ><input type="tel" maxlength="20" name="" v-model="password" autocomplete="off" id="password" value="" placeholder="请输入密码"/></div></li>
                </ul>
                <div class="register_btn" @click="get_password()">提交</div>
              </div>
              <div v-else>
                <ul class="centen">
                  <li><div class="input-box" ><input type="tel" maxlength="10" name="" v-model="codes" autocomplete="off" id="yzm" value="" placeholder="请输入验证码"/></div><button @click="sendcode" :disabled="disabled" class="yzm-box">{{btntxt}}</button></li>
                </ul>
                <div class="register_btn" @click="get_code()">下一步</div>
              </div>

              <div class="close" @click="close()"></div>
            </div>
            <div class="register-box" v-if="C_birthday">
              <div class="title">生日认证</div>
              <p class="p">{{this.$store.state.user.mobile}}</p>
              <ul class="centen">
                <li><div class="input-box" ><input type="text" maxlength="18" name="" v-model="IDcard" autoComplete="off" id="codeid" placeholder="身份证号码"/></div></li>
                 <li><div class="input-box" ><input type="text" maxlength="15" name="" v-model="Realname" autoComplete="off" id="name"placeholder="请输入真实姓名"/></div></li>
              </ul>
              <div class="register_btn" @click="get_IDcard()">提交</div>
              <div class="close" @click="close()"></div>
            </div>
         </div>
    </div>
</template>

<script>
export default {
 data () {
    return {
      allowSetInviteCode: false,
      prompttext:'',
      pop:false,
      C_password:false,
      C_birthday:false,
      codes:'',
      password:'',
      IDcard:'',
      Realname:'',
      steams:'',
      code:false,
      disabled:false,
      time:60,
      btntxt:"发送验证码",
    }
  },
  methods: {
    saveInviteCode() {
      if (!this.allowSetInviteCode && this.$store.state.user.invitationCode) {
        this.$api.post('/api/user/invitation/code', {
          invitationCode: this.$store.state.user.invitationCode
        }, res => {
          if (res.code === 200) {
            this.$confirm({
              type:'提示',
              time:'1',
              msg:'活动邀请码设置成功！',
            })
            this.allowSetInviteCode = true
          }
        })
      }
    },
    linkDownload(url){
       window.open(url,'_blank')
    },
    animate__box(){
      this.prompttext = '456123456'
      var k = this.$store.state.user.animation;
      k==0?k=1:k=0;
      this.$api.post('/api/user/update/userInfo',{
        animation:k
      }, r => {
          console.log(r)
          if(r.code==200){
            this.$store.commit('signin_animation',k)
          }
        })
    },
    sendcode(){
      this.timer();
    },
     //发送手机验证码倒计时
    timer() {
       if (this.time > 0) {
        this.disabled=true;
        this.time--;
        this.btntxt="倒计时"+this.time+"秒";
        setTimeout(this.timer, 1000);
       } else{
        this.time=0;
        this.btntxt="发送验证码";
        this.disabled=false;
       }
    },
    music__box(){
      var j = this.$store.state.user.soundEffects;
      j==0?j=1:j=0;
      this.$api.post('/api/user/update/userInfo',{
        soundEffects:j
      }, r => {
          console.log(r)
          if(r.code==200){
            this.$store.commit('signin_soundEffects',j)
          }
        })
    },
    Change_password(){
     this.pop = true;
     this.C_password = true;
    },
    get_code(){
      var k = this.codes
      var h = this.$store.state.user.mobile||13000000000
      if(k.length<4){
        this.$confirm({
            type:'提示',
            time:'1',
            msg:'验证码格式错误',
        })
        return false;
      }
      this.$api.post('/api/user/verification/code',{
        code:k,
        mobile:h,
      }, r => {
          if(r.code==200){
            this.code = true;
          }
        })
    },
    get_password(){
       var code = this.codes
       var passWord = this.password
       var mobile = this.$store.state.user.mobile||13000000000
       if(passWord.length<6){
         this.$confirm({
             type:'提示',
             time:'1',
             msg:'验证码格式错误',
         })
         return false;
       }
      this.$api.post('/api/user/update/password',{
        passWord:passWord,
        mobile:mobile,
        code:code
      }, r => {
          if(r.code==200){
            this.pop=false;
            this.C_password = false;
            this.code = false;
            this.codes = '';
            this.password = '';
            this.$confirm({
                type:'提示',
                time:'1',
                msg:'密码修改成功！',
            })
          }
        })
    },
    get_IDcard(){
      var IDcard = this.IDcard;
      var Realname = this.Realname;
      let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
       if( _IDRe18.test( IDcard )) {
         if(Realname.length<1){
           return false;
         }
       	this.$api.post('/api/user/real/name',{
       	  idCard:IDcard,
       	  name:Realname,
       	}, r => {
       	    if(r.code==200){
              this.pop= false;
              this.C_birthday = false;
              this.IDcard = '';
              this.Realname = '';
       	      this.$confirm({
       	          type:'提示',
       	          time:'1',
       	          msg:'修改成功！',
       	      })
       	    }
       	  })
       } else {
         this.$confirm({
             type:'提示',
             time:'1',
             msg:'身份证号码错误！',
         })
       	return false
       }

    },
    Change_birthday(){
      this.pop = true;
      this.C_birthday = true;
    },
    Change_steam(){
      var steams = this.steams
      if(steams==''){
        this.$confirm({
            type:'提示',
            time:'1',
            msg:'请输入steam码！',
        })
      }else{
          this.$api.post('/api/user/update/userInfo',{
            steamStorehouseLink:steams,
          }, r => {
              if(r.code==200){
                this.$confirm({
                    type:'提示',
                    time:'1',
                    msg:'修改成功！',
                })
                this.$store.commit('signin_steam',steams)
              }
            })
      }
    },
    close(){
      this.pop=false;
      this.C_password = false;
      this.C_birthday = false;
      this.code = false;
      this.name='';
      this.phone='';
      this.password='';
      this.yzm='';
      this.tjm='';
    },
  },
  mounted() {
    setTimeout(() => {
      this.allowSetInviteCode = !!this.$store.state.user.invitationCode
    }, 100)
  },
  created() {
    var that = this
    setTimeout(function(){
      that.steams = that.$store.state.user.steamStorehouseLink;
    },5)
  }
}
</script>

<style scoped>
  .steam_input{
    width: 100%;
    height: 100%;
    outline: none;
  }
  .pop{
   position: fixed;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
   min-height: 900px;
   min-width: 1200px;
   background-color: rgba(0,0,0,.5);
   z-index: 999;
   display: flex;
   justify-content: center;
   align-items: center;
  }
.register-box{
      width: 582px;
      background-color: #333842;
      padding: 45px 42px;
      box-sizing: border-box;
      position: relative;
    }
    .register-box .title{
      font-size: 22px;
      color: #FFFFFF;
      text-align: left;
    }
    .register-box .centen{
      margin-top: 40px;
    }
    .register-box .p{
      text-align: left;
      font-size: 20px;
      margin-top: 25px;
    }
  .register-box .centen>li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #24282F;
    margin-bottom: 16px;
    position: relative;
  }
  .register-box .yzm-box{
    position: absolute;
    top: 50%;
    right: 17px;
    font-size: 16px;
    color: #FFFFFF;
    height: 30px;
    line-height: 30px;
    margin-top: -15px;
    cursor: pointer;
    background-color: #24282F;
    border: none;
  }
  .register-box  .register_btn{
      width: 402px;
      height: 56px;
      line-height: 56px;
      background-color: #FFA22A;
      border-radius: 5px;
      font-weight: bold;
      color: #000000;
      font-size: 20px;
      margin:  40px auto 0;
      cursor: pointer;
    }
    .pop .close{
      background-image: url(../../assets/close-icon1.png);
      width: 40px;
      height: 40px;
      background-size: 100% 100%;
      cursor: pointer;
      position: absolute;
      top: 0;
      right: 0;
    }

 .input-box{
      width: 100%;
      height: 53px;
      line-height: 53px;
      border: 1px solid #24282F;
    }
    .input-box input{
      width: 100%;
      height:100%;
      border: none;
      background-color: #24282F;
      padding-left: 15px;
      box-sizing: border-box;
      font-size: 16px;
      outline: none;
      color: #FFFFFF;
    }
  .userindex-box-tips-box{
    text-align: left;
    font-size: 14px;
    color: #999;
    padding-left: 15px;
    margin-top: 30px;
    width: 410px;
  }
  .userindex-box-tips-box li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .userindex-box-tips-box li a{
    width: 169px;
    height: 30px;
    border: 2px solid #223A4C;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: #91ABBF;
    text-decoration: none;
  }
  .userindex-box-tips-box li span{
    color: #22557C;
  }
  .user-info-row .active{
    border: 2px solid #FFA22A;
    background-color: #FFA22A;
    color: #000000;
  }
  .user-info-row>div{
    display: flex;
    align-items: center;
  }
  .user-info-row>div:first-child{
    margin-right: 100px;
  }
  .user-info-row>div>span{
    font-size: 16px;
    margin-right: 15px;
  }
  .user-info-row>div>p{
    width: 109px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    border: 2px solid #223A4C;
    cursor: pointer;
    background-position: -109px 0;
  }
  .user-info-row>div>p:hover{
    /* border: 2px solid #FFA22A;
    background-color: #FFA22A;
    color: #000000; */
    transition: all .3s;
    opacity: .8;
  }
  .user-info-row{
    display: flex;
  }
  .address{
    text-align: left;
    font-size: 14px;
    color: #999;
    padding-left: 15px;
  }
  .userindex-box{
    padding: 80px 90px 0;
    color: #FFFFFF;
  }
  .userindex-box .tltle{
    text-align: left;
    font-size: 22px;
  }
  .userindex-box-module-content{
    margin-top: 29px;
    width: 100%;
    margin-bottom: 75px;
  }
  .custom-from-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
  }
  .custom-inoput-box{
    width: 642px;
    height: 53px;
    background-color: #282B34;
    line-height: 53px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 23px;
    box-sizing: border-box;
  }
  .custom-inoput-box span{
    margin-right: 25px;
  }
  .custom-inoput-box input{
    color: #bbbbbb;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    background-color: #282B34;
    border: none;
  }
  .custom-inoput-box input::placeholder{
    color: #bbbbbb;
  }
  .custom-btn-box{
    width: 172px;
    height: 53px;
    line-height: 53px;
    background-color: #FFA22A;
    cursor: pointer;
    color: #000;
  }
  .custom-from-box .active{
    background-color: #816E50;
    color: #FFFFFF;
    cursor: not-allowed !important;
  }
</style>
